import { Button, DatePicker, Form, Input, Select, Space } from "antd";
import { message } from "antd";
import dayjs from "dayjs";

// 新增预约表单组件（已合并日期和时间选择）
export const AddAppointment = () => {
  const [form] = Form.useForm(); // AntD Form 表单实例

  // 服务项目列表
  const serviceOptions = [
    { value: '', label: '全部项目' },
    { value: 'tuina', label: '推拿按摩' },
    { value: 'zhenjiu', label: '针灸治疗' },
    { value: 'aijiu', label: '艾灸养生' },
    { value: 'baguan', label: '拔罐疗法' },
    { value: 'zhongyao', label: '中药熏蒸' }
  ];

  // 提交新增预约
  const handleSubmit = () => {

    form.validateFields().then((values) => {
      // 处理合并后的日期时间
      const appointmentDateTime = dayjs(values.appointmentDateTime).format('YYYY-MM-DD HH:mm');

      // 1. 标记为“管理员代操作”
      const newAppointment = {
        ...values,
        appointmentDateTime, // 保存格式化后的日期时间字符串
        id: `A${Date.now()}`, // 生成临时ID
        status: 'booked', // 默认为“已预约”
        operator: 'admin', // 标记管理员操作
      };

      // 移除原始的appointmentDateTime对象，保留格式化后的字符串
      delete newAppointment.appointmentDateTime;

      console.log(newAppointment,';;;;')
      message.success('预约新增成功（管理员代操作）');
      
    }).catch(info => {
      message.error('表单验证失败：');
    });
  };



  return (
    <Form form={form} layout="vertical" className="modal-box">
      <Form.Item
        name="customerName"
        label="客户姓名"
        rules={[{ required: true, message: '请输入客户姓名' }]}
      >
        <Input placeholder="请输入客户姓名" />
      </Form.Item>

      <Form.Item
        name="customerPhone"
        label="客户电话"
        rules={[{ required: true, message: '请输入客户电话' }]}
      >
        <Input placeholder="请输入客户电话" />
      </Form.Item>

      <Form.Item
        name="service"
        label="理疗项目"
        rules={[{ required: true, message: '请选择理疗项目' }]}
      >
        <Select options={serviceOptions} placeholder="请选择理疗项目" />
      </Form.Item>

      {/* 合并后的日期时间选择器 */}
      <Form.Item
        name="appointmentDateTime"
        label="预约日期和时间"
        rules={[{ required: true, message: '请选择预约日期和时间' }]}
      >
        <DatePicker
          placeholder="请选择预约日期和时间"
          format="YYYY-MM-DD HH:mm"
          showTime
          onChange={(value, dateString) => {

            console.log(dateString);
          }}

        />

      </Form.Item>

      <Form.Item>
        <Space>
          <Button type="primary" onClick={() => handleSubmit()} htmlType="submit">
            确认新增
          </Button>
          <Button htmlType="button" onClick={() => form.resetFields()}>
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};
